<template>
    <div class="book-list-second-root">
        <div class="box-left">
            <img :src="books.src" alt="">
        </div>
        <div class="box-right">
            <h4>{{books.name}}</h4>
            <slot name="line1" class="description"></slot>
            <slot name="line2"></slot>
            <p class="bottom">
                <span><img src="/img/观看.png" alt=""> {{books.reading}}</span>
                <span><img src="/img/收藏.png" alt=""> {{books.collect}}</span>
                <span><img src="/img/留言.png" alt=""> {{books.comment}}</span>
            </p>
            <!-- 这个字段是右边悬浮框 -->
            <div v-if="books.borrow">
                <div class="borrow">
                    
                </div>
                <div class="borrow-box">

                    {{books.borrow}}
                </div>
            </div>
        </div>
        <div class="lock" v-if="books.lock">
            <img src="/img/lock.png" alt="">
        </div>
    </div>
</template>

<script>
export default {
  props: ["books"]
};
</script>

<style scoped lang="less">
.book-list-second-root {

  display: flex;
  position: relative;
  
}
.box-left img {
  width: 21.5vw;
  height: 30.4vw;
  border-radius: 1.1vw;
}
.description {
  overflow: hidden;
  font-size: 3.7vw;
  line-height: 5vw;
  color: #999999;
  margin-top: 3.5vw;
}
h4 {
  color: #333333;
  font-size: 4.5vw;
  margin-top: 3.1vw;
}
.box-right img {
  width: 3.7vw;
}
.box-right {
  margin-left: 4vw;
  position: relative;
  width: 71vw;
}
.bottom {
  color: rgba(172, 172, 172, 0.5);
  display: flex;
  justify-content: space-between;
  margin-top: 5.2vw;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  font-size: 3.2vw;
}
.borrow {
  position: absolute;
  top: 3.1vw;
  right: 2vw;
  width: 13.3vw;
  height: 6.7vw;
  background: #609aff;
  border-radius: 1.1vw;
}
.borrow-box {
  position: absolute;
  top: 3.1vw;
  right: 2vw;
  width: 13.3vw;
  font-size: 3.5vw;
  height: 6.7vw;
  background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0), #6561ff);
  color: #ffffff;
  text-align: center;
  line-height: 6.7vw;
  border-radius: 1.1vw;
}

.lock {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.1);
  width: 21.3vw;
  height: 30.4vw;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  border-radius: 1.1vw;
}
.lock img{
  width: 6.7vw;
  height: 8.5vw;
}
.line1{
  margin-top: 3.1vw;
  font-size: 3.2vw;
   color: #999999;
}
.line2{
  margin-top: 4.9vw;
  font-size: 3.5vw;
   color: #999999;
}
.line2 span{
  font-size: 3.7vw;
}
.line2 span:nth-of-type(2){
  margin-left: 6.8vw;
}

</style>